<template>
  <van-nav-bar
    title="标题"
    :fixed="true"
    :safe-area-inset-top="true"
    :placeholder="true"
    @click-right="onClickRight"
  >
    <template #left>
      <van-icon name="scan" />
    </template>
    <template #right> <van-icon name="manager-o" /> </template>
    <template #title>
      <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" />
    </template>
  </van-nav-bar>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
export default {
  setup() {
    const state = reactive({
      value: "",
    });
    const onClickRight = (e) => {
      console.log("click right");
    };
    return {
      ...toRefs(state),
      onClickRight,
    };
  },
};
</script>

<style lang="less" scoped>
.nav-bar {
  position: fixed;
  top: 0;
  width: 100%;
}
::v-deep(.van-nav-bar__left) {
  font-size: 20px !important;
}
::v-deep(.van-nav-bar__right) {
  font-size: 20px !important;
}
::v-deep(.van-nav-bar__title) {
  min-width: 70% !important;
}
::v-deep(.van-field__left-icon) {
  display: none;
}
::v-deep(.van-search) {
  padding: 0;
}
</style>
